import React from 'react';
import { Card, Steps, Tag, Tooltip, Space, Select } from 'antd';
import { CheckCircleFilled, ExclamationCircleOutlined } from '@ant-design/icons';
import styles from '../styles/components.less';
import { useNavigate } from 'react-router-dom';

const { Step } = Steps;

interface ProjectProgress {
  id: string;
  name: string;
  code: string;
  currentStage: string;
  lastUpdate: string;
  stages: {
    title: string;
    status: 'finish' | 'process' | 'wait' | 'error';
    time?: string;
    subStages: {
      title: string;
      status: 'finish' | 'process' | 'wait' | 'error';
      time?: string;
      description?: string;
    }[];
  }[];
}

const ProcessMonitor: React.FC = () => {
  const navigate = useNavigate();

  const projects: ProjectProgress[] = [
    {
      id: '1',
      name: '示范区档案管理项目',
      code: 'PRJ001',
      currentStage: '预验收阶段',
      lastUpdate: '2024-03-15 10:30',
      stages: [
        {
          title: '预验收申请',
          status: 'finish',
          time: '2024-03-10',
          subStages: [
            { title: '申请提交', status: 'finish', time: '2024-03-08' },
            { title: '条件审查', status: 'finish', time: '2024-03-09' },
            { title: '申请审核', status: 'finish', time: '2024-03-10' }
          ]
        },
        {
          title: '预验收阶段',
          status: 'process',
          subStages: [
            { title: '预验收通知', status: 'finish', time: '2024-03-12' },
            { title: '验收工作开展', status: 'process', description: '剩余3天' },
            { title: '问题反馈', status: 'wait' },
            { title: '整改完成', status: 'wait' }
          ]
        },
        {
          title: '正式验收阶段',
          status: 'wait',
          subStages: [
            { title: '正式验收申请', status: 'wait' },
            { title: '验收通知', status: 'wait' },
            { title: '材料审核', status: 'wait' },
            { title: '意见反馈', status: 'wait' },
            { title: '整改复查', status: 'wait' }
          ]
        },
        {
          title: '验收总结阶段',
          status: 'wait',
          subStages: [
            { title: '整改确认', status: 'wait' },
            { title: '考核评价', status: 'wait' },
            { title: '结果备案', status: 'wait' }
          ]
        }
      ]
    }
    // ... 可以添加更多项目
  ];

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'finish':
        return <CheckCircleFilled style={{ color: '#52c41a' }} />;
      case 'process':
        return <Tag color="blue">进行中</Tag>;
      case 'error':
        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />;
      default:
        return null;
    }
  };

  const getTimeDisplay = (stage: any) => {
    if (stage.time) {
      return stage.time;
    }
    if (stage.status === 'process' && stage.description) {
      return stage.description;
    }
    return '';
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'finish':
        return '已完成';
      case 'process':
        return '进行中';
      case 'wait':
        return '待开始';
      case 'error':
        return '异常';
      default:
        return '';
    }
  };

  const handleStageClick = (stage: any) => {
    switch (stage.title) {
      case '预验收申请':
        navigate('/pre-acceptance');
        break;
      case '预验收阶段':
        navigate('/pre-acceptance/process');
        break;
      case '正式验收阶段':
        navigate('/formal-acceptance');
        break;
      case '验收总结阶段':
        navigate('/summary/reform');
        break;
      default:
        // 点击整个进程监控区域时跳转到进程列表
        navigate('/process-list');
    }
  };

  return (
    <div 
      className={styles.processMonitor} 
      onClick={() => handleStageClick({})}  // 点击空白区域跳转到列表页
    >
      <div className={styles.header}>
        <Select
          defaultValue={projects[0].id}
          style={{ width: 280 }}
          options={projects.map(p => ({ label: p.name, value: p.id }))}
        />
      </div>

      {projects.map(project => (
        <div key={project.id} className={styles.projectProgress}>
          <div className={styles.projectInfo}>
            <Space size="large">
              <span className={styles.projectName}>{project.name}</span>
              <Tag>{project.code}</Tag>
              <span className={styles.currentStage}>
                当前阶段：{project.currentStage}
              </span>
            </Space>
            <span className={styles.lastUpdate}>
              最近更新：{project.lastUpdate}
            </span>
          </div>

          <Steps 
            current={project.stages.findIndex(s => s.status === 'process')}
            className={styles.progressSteps}
          >
            {project.stages.map((stage, index) => (
              <Step
                key={index}
                title={stage.title}
                status={stage.status}
                icon={getStatusIcon(stage.status)}
                onClick={(e) => {
                  e.stopPropagation();  // 阻止事件冒泡
                  handleStageClick(stage);
                }}
                description={
                  <div className={styles.stageDetail}>
                    {stage.subStages.map((subStage, subIndex) => (
                      <Tooltip
                        key={subIndex}
                        title={`状态: ${getStatusText(subStage.status)}`}
                      >
                        <div className={styles.subStage} onClick={() => handleStageClick(subStage)}>
                          <span className={`${styles.subStageTitle} ${styles[subStage.status]}`}>
                            {subStage.title}
                          </span>
                          <span className={`${styles.subStageTime} ${styles[subStage.status]}`}>
                            {getTimeDisplay(subStage)}
                          </span>
                          <span className={`${styles.subStageStatus} ${styles[subStage.status]}`}>
                            {getStatusText(subStage.status)}
                          </span>
                        </div>
                      </Tooltip>
                    ))}
                  </div>
                }
              />
            ))}
          </Steps>
        </div>
      ))}
    </div>
  );
};

export default ProcessMonitor; 